<script setup lang="ts">

import ThreeDiv from "@/Components/ThreeDiv.vue";
import ChildBoth from "@/Components/ChildBoth.vue";
import LeftList from "@/Components/LeftList.vue";
import RightUserPhoto from "@/Components/RightUserPhoto.vue";
import UndoRedoSearch from "@/Components/UndoRedoSearch.vue";
import SongBottom from "@/Components/SongBottom.vue";
import MusicRoomTitleSvg from "@/svg/MusicRoomTitleSvg.vue";
import router from "@/Router";
import {songStyles} from "@/store/dataType";
import SongList from "@/Components/SongList.vue";

const sendStyleSongsTab = (style:String) => {
  let styleObject={
    style:style
  }
  router.push({
    path:"/style_songs",
    query:styleObject
  })
}

//定义动态样式，注意这里的样式类型数量需要和songStyles类型数量一致
let cssClassList = [
    "c1","c2","c3","c4","c5"
]
</script>

<template>
  <song-bottom class="pl-30 pr-35" :pageName="pageName"></song-bottom>
  <div class="body flex">
    <left-list class="h-full w-55"></left-list>
    <div class="main grow h-183 flex flex-col overflow-auto pb-15 mx-3 ml-60">
      <undo-redo-search class="w-full ml--5"></undo-redo-search>
      <div class="mt-25 h-auto flex-col ml-3 ">
        <div class="flex-col h-auto gap-y-4 text-xl">
          <div class="text-10 text-gray-7 font-bold mb-8">音乐馆</div>
          <div class="w-295 flex-col h-auto gap-y-4 ml-8 ">
            <div class="grid grid-cols-4 gap-5  mb-10">
              <div v-for="(ele,index) in songStyles"
                   @click="sendStyleSongsTab(ele)"
                   class="flex h-50 p-4 rounded-2xl"
                   :class="cssClassList[index]"
              >
                <div class="text-gray-5 px-2 bg-white rounded-xl h-10 text-6 font-bold flex justify-center items-center">{{ ele }}</div>
              </div>
              <div v-for="(ele,index) in songStyles"
                   @click="sendStyleSongsTab(ele)"
                   class="flex h-50 p-4 rounded-2xl"
                   :class="cssClassList[index]"
              >
                <div class="text-gray-5 px-2 bg-white rounded-xl h-10 text-6 font-bold flex justify-center items-center">{{ ele }}</div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

</template>

<!--<style scoped>-->
<!--</style>-->

<!--<style scoped>-->

<!--</style>-->
<style scoped>
div::-webkit-scrollbar {
  display: none;
}

div {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.c1{
  --at-apply: "bg-cyan-2 opacity-60 hover:bg-cyan-3";
}
.c2{
  --at-apply:" bg-blue-2 opacity-60 hover:bg-blue-3";
}
.c3{
  --at-apply:" bg-purple-2 opacity-60 hover:bg-purple-3";
}
.c4{
  --at-apply:" bg-pink-2 opacity-60 hover:bg-pink-3";
}
.c5{
  --at-apply:" bg-red-2 opacity-60 hover:bg-red-3";
}

</style>